<template>
	<u-popup :customStyle="{bottom:bottom_height}" :show="show" bgColor="#fff" @close="closeMore" round='16'>
		<view class="fixedTitle_equip">
			<view class="left"></view>
			<view class="middle">
				已选装备
			</view>
			<view class="right">
				<u-icon @click="closeMore" class="close" name="close" color="black" size="20"></u-icon>
			</view>
		</view>
		<view class="container_equip">
			<view class="title">总数量({{buyList.length||0}})</view>
			<view class="list" v-for="item,index in buyList">
				<view style="text-align: left;">{{item.materialName||item.offeringName||item.decorationName || item.name}}</view>
				<view style="text-align: center;">{{ item.price == 0 ? '免费' : item.price + '福币' }}</view>
				<!-- <view>{{ item.lifespan==0?'永久': item.lifespan+'天' }}</view> -->
				<view class="CC" style="text-align: right;"> <u-icon @click="del(item,index)" class="close" name="close" color="black"
						size="20"></u-icon>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		defineEmits,
		defineProps,
		ref
	} from 'vue'
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	const props = defineProps(['bottom_height', 'buyList'])
	const emit = defineEmits(['del'])
	const show = ref(false)
	// let height = ref(0)
	// const sendHeight = ((e) => {
	// 	height.value = e + 'px'
	// })
	const closeMore = (() => {
		show.value = false
		store.state.userInfo.flag = false
	})
	const del = ((item, index) => {
		props.buyList.splice(index, 1)
		emit('del', {
			id: item.id || item.offeringId,
			buyList: props.buyList
		})

	})
	defineExpose({
		show
	})
</script>


<style lang="scss">
	.fixedTitle_equip {
		width: 100%;
		font-size: 32rpx;
		color: #0E0E0E;
		padding: 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left,
		.right {
			width: 100rpx;
			flex-shrink: 0;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			padding-right: 32rpx;
			box-sizing: border-box;
		}

		.middle {
			flex: 1;
			text-align: center;
		}

	}

	.container_equip {
		padding: 0 48rpx;
		// height: 300rpx;
		max-height: 60vh;
		min-height: 25vh;
		overflow: auto;

		.title {
			font-size: 32rpx;
			padding-bottom: 38rpx;
		}

		.list {
			padding-bottom: 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 25%;
			}

			.CC {
				display: flex;
				justify-content: flex-end;
			}

		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}
</style>